<template>
	<view class="newsSearch">
		<uni-nav-bar left-icon="left" title="商品搜索" @clickLeft="$goURl('/pages/index/index')" :fixed="true" :border="false" :statusBar="true"/>
		<view class="content">
			<uni-search-bar @confirm="searchtm" placeholder="输入商品名称" :focus="true" v-model="data.searchValue" @blur="blur"  radius="30"  @input="handleChange">
			</uni-search-bar>
      <view class="lenovoList_cnt" v-if="lenovoList.length>0">
        <view class="list_it l_f_r_sb_c text_5_28 text_c_5" v-for="(it,i) in lenovoList" @click="prpular(it.name)">
          <view>{{it.name}}</view>
          <uni-icons type="search" size="26" color="#f40" > </uni-icons>

        </view>
      </view>
      <template v-else>
			<view class="search" v-if="data.popularList.length>0">
				<text class="searchText" >历史搜索</text>
				<view class="searMiss">
					<view class="prpular" v-for="(news,indexs) in data.popularList" :key="indexs" @click="prpular(news)">
						<text class="prpularText">{{news}}</text>
					</view>
				</view>
			</view>
			<view class="search" v-if="data.resoulist.length>0">
				<text class="searchText">热门搜索</text>
				<view class="searMiss">
					<view class="prpular" v-for="(news,indexs) in data.resoulist" :key="indexs" @click="prpular(news.name)">
						<text class="prpularText">{{news.name}}</text>
					</view>
				</view>
			</view>
      </template>
		</view>

	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	let data = reactive({
		popularList:[],
		searchValue:'',
		resoulist:''
	})
	onLoad(() => {

	})
	onShow(() => {
		data.popularList=uni.getStorageSync('popularLists')?uni.getStorageSync('popularLists'):[],
		resou()
	})
	function resou(){
		proxy.$request({
			url: `api/hotSearchList/?code=0&page=1&size=6`,
			method: 'get',
			success(res) {
				console.log(res)
				data.resoulist=res.data.data
			}
		})
	}
  const lenovoList=ref([])
  const handleChange=(e)=>{
    console.log(e)
    if(!e){
       return
    }
    proxy.$request({
      url: `api/lenovoSearch/?prefix=${e}`,
      method: 'get',
      success(res) {
        console.log(res)
        if(res.errno==0){
          lenovoList.value=(res.data||[]).map(it=>({name:it}))

        }
      }
    })
  }
	// 搜索
	function searchtm(res) {
		if(!res.value){
			uni.showToast({
				icon:'none',
				title:'请输入搜索内容'
			})
			return
		}
		data.popularList.unshift(res.value)
		data.popularList=data.popularList.splice(0,6)
		data.popularList=Array.from(new Set(data.popularList))
		uni.setStorageSync('popularLists',data.popularList)
		proxy.$goURl('/pages/commodity/list?keyword='+res.value)
	}
	function prpular(news){
		data.searchValue = news
		data.popularList.unshift(news)
		data.popularList=data.popularList.splice(0,6)
		data.popularList=Array.from(new Set(data.popularList))
		uni.setStorageSync('popularLists',data.popularList)
		proxy.$goURl('/pages/commodity/list?keyword='+news)
	}
	function blur(res){

	}


</script>

<style lang="scss" scoped>
	page{
		background: #fff;
	}
	.search{
		width: 94%;
		margin: 0 auto;
		.searchText{
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
			letter-spacing: 1rpx;
		}
		.searMiss{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 20rpx;
		}
		.prpular{
			background: #ffffff;
			border: 2rpx solid #d6d6d6;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 8rpx 24rpx;
			margin: 0 20rpx 20rpx 0;
		}
		.prpularText{
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #999999;
			letter-spacing: 1rpx;
		}
	}
  .lenovoList_cnt{
    padding: 20rpx 30rpx;
    .list_it{
      margin:  10rpx 0;
      padding: 5rpx 0;
      border-bottom: 1rpx solid rgba(214, 214, 214, 0.5);
    }

  }
</style>
